<template>
  <div>
     
      <label>标题：</label>
      <input :readonly="save" class="input" v-model="title" type="text" placeholder="北辞谈人生">
      <label>描述：</label>
      <input :readonly="save" class="input" v-model="message" type="text" placeholder="路漫漫其修远兮">
      <label class="checkbox-label" >热搜：</label>
      <input :readonly="save" class="checkbox" @change="isHot=!isHot" type="checkbox" placeholder="描述">
      <label class="checkbox-label" >置顶：</label>
      <input :readonly="save" class="checkbox" @change="isTop=!isTop"  type="checkbox" placeholder="描述">
      <p style="text-align:right"><button @click="saveInfo">{{saveMessage}}</button></p>
  </div>
</template>

<script>
export default {
    data(){
        return{
            title:"",
            message:"",
            isHot:false,
            isTop:false,
            save:false,
            saveMessage:"保存"
        }
    },
    methods:{
        saveInfo(){
            //将信息传给父组件
            var data = {
                title:this.title,
                message:this.message,
                isHot:this.isHot,
                isTop:this.isTop
            }
            this.$emit('saveInfo', data);
            //将输入框禁止
            this.save=!this.save
            this.saveMessage=="已保存"?this.saveMessage="保存":this.saveMessage="已保存"
        }
    }
}
</script>

<style scoped lang="less">
    label{
        display: block;
        font-size: 10px;
        margin-top: 5px;
    }
    .input{
        width: 200px;
        height: 30px;
        border: none;
        background: rgb(74, 170, 226);
        outline: 0;
        padding-left: 10px;
        border-radius: 5px;
        display: block;
    }
    .checkbox-label{
        display: initial;
        margin-left: 5px;
        
    }
    .checkbox{
        margin-top: 15px;
    }
    button{
        width: 60px;
        height: 30px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        background:rgb(74, 170, 226)
    }
</style>